<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=switch-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="{{ url_for('static',filename='js/mui.min.js')}}"></script>
		<link href="{{url_for('static',filename='css/mui.min.css')}}" rel="stylesheet" />
		<style >
			.r_desc{
				font-size : 10px;
				color: gray;
			}
			.s_desc{
				color: gray;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<!-- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> -->
			<h1 class="mui-title">开关控制</h1>
		</header>
		<div class="mui-content">
			<ul class="mui-table-view">
				{% for room in rooms%}
				<li class="mui-table-view-cell mui-collapse mui-active">
					<a class="mui-navigate-right" href="#">房间名：{{room.name}}</a>
					{% for switch in room.switchs%}
					<div class="mui-collapse-content">
						<p style="display: inline-block;">{{switch.name}}</p>
						<div s_id="{{switch.id}}" code="{{switch.code}}" class="mui-switch {% if switch.status==1 %}mui-active{% endif%} " style="float: right;">
							<div class="mui-switch-handle" style="float: right;"></div>
						</div>
					</div>
					{% endfor %}
				</li>
				{% endfor %}
			</ul>
		</div>
	</body>

</html>
<script type="text/javascript" charset="utf-8">
	mui.init();
	switchs = document.getElementsByClassName('mui-switch')
	for(var index = 0; index < switchs.length; index++) {
		switchs[index].addEventListener("toggle", function(event) {
			s_id = this.getAttribute('s_id')
			status = event.detail.isActive?1:0
			new Audio('static/voice/da.wav').play();
			mui.post('{{url_for('switch_toggle')}}',{s_id:s_id,status:status},function(data){
				if(data == -1){
					mui.toast('参数错误',{ duration:1000, type:'div' })
				}else if (data == 0){
					mui.toast('创建失败',{ duration:1000, type:'div' })
				}else{
					mui.toast('切换成功',{ duration:1000, type:'div' })
				}
			},'json');
		});
	}
</script>
